<template>
    <div>
        <button @click="changeName">切换组件</button>
        <component :is="name"></component>
    </div>
</template>

<script>
import One from "@/components/One";
import Two from "@/components/Two";
export default {
    name: "App",
    data() {
        return {
            name: "One",
        };
    },
    components: {
        One,
        Two,
    },
    methods: {
        changeName() {
            this.name = this.name === "One" ? "Two" : "One";
        },
    },
};
</script>

<style scoped></style>
